<template>
  <el-container>
    <el-aside width="200px">
      <el-row>
        <el-col :span="24">
          <el-image style="width: 160px; height: 80px; display: block; margin: 40px auto" fit="fill"
            :src="logo"></el-image>
          <el-menu active-text-color="#ffd04b" background-color="#191A22" class="el-menu-vertical-demo"
            default-active="2" text-color="#fff"><el-sub-menu index="1">
              <template #title>
                <el-icon></el-icon>
                <span>系统管理</span>
              </template>
              <el-menu-item index="1-1" @click="open('user')" v-hasPermission="['system:user:query']">
                用户管理</el-menu-item>
              <el-menu-item index="1-2" @click="open('role')"> 角色管理</el-menu-item>
            </el-sub-menu>
            <el-menu-item index="2">
              <el-icon></el-icon>
              <span>客户管理</span>
            </el-menu-item>
          </el-menu>
        </el-col>
      </el-row>
    </el-aside>
    <el-container>
      <!-- <el-header
        v-html="'<button onclick=\'alert(1)\'>我是攻击者的按钮</button>'"
      ></el-header> -->
      <el-header>
        <!-- 昵称: <span v-html="store.state.user.nickName"></span> -->
        昵称: <span>{{ store.state.user.nickName }}</span>
        <el-button type="danger" @click="isLogout = true">退出</el-button>
        <el-dialog v-model="isLogout" title="警告" width="500" align-center>
          <span>是否需要退出系统？</span>
          <template #footer>
            <div class="dialog-footer">
              <el-button @click="isLogout = false">取消</el-button>
              <el-button type="primary" @click="doLogout">登出</el-button>
            </div>
          </template>
        </el-dialog>
      </el-header>
      <!--进行路由跳转-->
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import logo from "@/assets/images/main_logo.png";
import { ref } from "vue";
import router from "@/router";
import store from "@/store";

const isLogout = ref(false);

const doLogout = async () => {
  await store.dispatch("LOGOUT").then(() => {
    isLogout.value = false;
    router.push({ name: "login" });
  });
};

const open = (name) => {
  router.push({ name });
};
</script>

<style scoped>
.el-container {
  height: 100%;
}

.el-header {
  margin-bottom: 20px;
  background: #e9eef3;
}

.el-footer {
  line-height: 60px;
}

.el-aside {
  background-color: #191a22;
  color: var(--el-text-color-primary);
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #fcfcfc;
  color: var(--el-text-color-primary);
  text-align: center;
}
</style>
